<template>
    <div class="list">
        <div class="tuan_btn">
            <span :class="{active:currIndex==index}" @click="huan(index)"  v-for="(item,index) in btnArr" :key="index">{{item}}</span>
        </div>
        <div class="tuan_list" v-for="(item,index) in trade?tuanArr:tuanArrone" :key="index">
            <div class="tuan_img">
                <img :src="item.picture" alt="">
            </div>
            <div class="tuan_text">
                <div class="tuan_name">
                    <span>{{item.name}}</span><br>
                    <span>{{item.promotion_info}}</span>
                </div>
                <div class="tuan_price">
                    <div class="price">
                        <span>￥{{item.min_price}}</span>
                        <span>{{item.month_saled_content}}</span>
                    </div>
                    <div class="rob" >
                            马上抢
                    </div> 
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            // 用来存储index
            currIndex:0,
            // 定义一个变量用三目运算符来控制列表渲染
            trade:true,
            btnArr:['正在抢购','上新预告'],
        }
    },
    methods:{
        // 点击按钮高亮。控制列表渲染
        huan(index){
            this.currIndex=index;
            if(index==1){
                this.trade=false;
            }else if(index==0){
                this.trade=true;
            }
        }
    },
// 通过props接收从父组件传来的值，该值只能读，不能写
    props:{
        tuanArr:{type:Array,default:[]},
        tuanArrone:{type:Array,default:[]}
    }
}
</script>

<style lang="scss" scoped>
    .list{
        position: absolute;
        top: 200px;
        width: 100%;
        background: rgba(255, 155, 255, 0.1)
    }
    .list .tuan_btn{
        width: 100%;
        padding-left: 10px; 
        height: 40px;
        box-sizing: border-box;
    }
    .list .tuan_btn span{
        height: 40px;
        line-height: 40px;
        color: #999;
        margin-right: 30px;
    }
    .list .tuan_btn .active{
        color: white;
    }
    .list .tuan_list{
        width: 95%;
        display: flex;
        margin: 10px auto;
        padding: 10px 0;
        background: white;
        box-sizing: border-box;
        border-radius: 5px;
    }
    .list .tuan_list .tuan_img{
        width: 80px;
        height: 80px;
        margin:0 10px;
    }
    .list .tuan_list .tuan_img img{
        width: 100%;
    }
    .list .tuan_list .tuan_text{
        width: 80%;
        line-height: 30px;
    }
    .list .tuan_list .tuan_text .tuan_name span:nth-child(1){
        font-weight: bold;
    }
    .list .tuan_list .tuan_text .tuan_name span:nth-child(3){
        color: red;
        font-size: 12px;
    }
    .list .tuan_list .tuan_text .tuan_price{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .list .tuan_list .tuan_text .tuan_price .price span:nth-child(1){
        color: red;
        font-size: 18px;
    }
    .list .tuan_list .tuan_text .tuan_price .price span:nth-child(2){
        color: red;
        font-size: 12px;
        margin-left: 5px;
    }
    .list .tuan_list .tuan_text .tuan_price .rob{
        padding: 5px 20px;
        background: red;
        border-radius: 34px;
        color: white;
        margin-right: 10px;
    }
</style>